iT邦幫忙

2025 iThome 鐵人賽

DAY 5
1
生成式 AI

左手藍圖,右手魔法:DDD 與 Vibe Coding 的開發協奏曲系列 第 5

Day 5: 【工具篇 #3】終端機裡的魔法:什麼是 Vibe Coding 與 Gemini CLI?

  • 分享至 

  • xImage
  •  

安安,我是 ChiYu!

昨天,我們完成了技師的工作,為我們的專案蓋好了雲端機棚 (GitHub),也把駕駛艙 (VS Code) 裝潢得舒適又專業。硬體設施全部到位,現在,是時候為我們的專案注入真正的「靈魂」了。

今天,我們將迎來本系列第一個令人心跳加速的轉捩點。我們不只要安裝「引擎」,我們還要學會詠唱「魔法的咒語」,真正地與 AI 對話,把我們的意念灌注到終端機之中!準備好迎接你的「魔法覺醒」了嗎?

Part 1:到底什麼是「Vibe Coding」?

最近你可能常常聽到 Vibe Coding 這個詞,但它到底是什麼意思?

它不是什麼艱深的技術或框架,而是一種徹底顛覆傳統的開發風格或心態。

這徹底顛覆了我們過去學習程式的模式。以前我們學的是機器的**「語法 (Syntax)」,現在我們學的是如何更精準地「表達意圖 (Intent)」**。你的中文能力,從未像此刻一樣,直接與你的生產力掛鉤。

這就像你從一個樂手,變成了一個指揮家。你不用親自演奏每個樂器,你只需要揮舞你的指揮法杖,告訴整個樂團(AI),這一段要「雄壯激昂」、那一段要「溫柔婉約」。你負責定義**「氛圍 (Vibe)」**,AI 負責實現它。

而我們今天要安裝的 Gemini CLI,就是我們的第一支客製化指揮法杖。

Part 2:我們的魔法法杖:Gemini CLI,你的開源 AI 代理人

CLI 的全名是 Command Line Interface (命令列介面)。你不用害怕這個詞,它指的就是我們在 VS Code 裡打開的那個黑黑的、看起來很像駭客電影的「終端機」視窗。

我們要介紹的 gemini-cli,根據 Google 官方的說法,它不只是一個工具,更是一個**「開源的 AI 代理人 (Open Source AI Agent)」**。這代表它是一個住在你終端機裡的智慧夥伴,可以幫你讀取檔案、存取網路、甚至與其他工具串接,來完成更複雜的任務。

官方參考資料

gemini-cli 有興趣的讀者,可以直接參考它的官方 GitHub 倉庫與 Google 官方部落格文章:

Part 3:安裝與授權:法杖的鑄造與認主

好的,讓我們開始進行法杖的「鑄造與附魔」!

Step 1:前置作業 - 準備 Node.js 環境

根據官方文件,gemini-cli 的執行環境是 Node.js。所以今天,請先確保你的電腦有 Node.js v20 或更高版本的環境。

你可以在終端機輸入 node -v 來檢查版本。如果沒有安裝,或版本太舊,請到官方網站下載安裝。

Step 2:輸入安裝指令

打開你的終端機,深呼吸,然後貼上這段神聖的安裝咒語:

npm install -g @google/gemini-cli

npm 是 Node.js 的套件管理員,而 -g 代表我們要進行「全域安裝」,這樣在任何地方都能使用 gemini 這個指令。當你看到終端機跑完一連串安裝訊息,就代表你的指揮法杖已經裝備完成!
https://ithelp.ithome.com.tw/upload/images/20250824/20132971m5fads0ku4.jpg

Step 3:授權儀式

接下來,我們要進行一場神聖的「認主儀式」,讓這支法杖只聽命於你一人。在終端機裡,輸入以下授權指令:

gemini auth login

按下 Enter 後,你的瀏覽器會自動打開一個 Google 登入與授權頁面。勇敢地按下「允許」,儀式就完成了!你的 CLI 工具現在已經跟你個人的 Google 帳號綁定在一起了。

Part 4:調校你的法杖:深入 Gemini CLI 的各式設定

一把好的法杖,不僅要能用,更要能隨心所欲地調校。gemini-cli 提供了強大的 config 指令,讓我們可以客製化 AI 的行為。

我們可以先執行 gemini 進入對話模式,接著輸入/help,
/help
就會告訴你有哪些設定與功能
https://ithelp.ithome.com.tw/upload/images/20250824/20132971APGU4j3iMT.png

其實也可以只輸入
/
會直接跳出許多選項可以選取
https://ithelp.ithome.com.tw/upload/images/20250824/20132971pNTyqlWtBG.png

那第一次用一定要設定的東西就是:
/theame 設定Gemini CLI 主題樣式
https://ithelp.ithome.com.tw/upload/images/20250824/20132971cWzi2XGJVq.png

/docs
就會跳出官方的文件可以查詢~
https://github.com/google-gemini/gemini-cli/blob/main/docs/index.md

還有個設定會需要特別注意!!!
YOLO模式!
在Gemini CLI 會話開啟前,如果我們在終端機打上gemini的同時,後面加上--yolo!
會讓Gemini CLI 再進行任務處理時都不會在詢問過User!會直接執行!建議是很小或是不需要別檢核的情況在開啟!以免出現意料外的錯誤,然後也沒有正確的篩選出來!
來看看Gemini CLI是怎麼跟我們說的:
https://ithelp.ithome.com.tw/upload/images/20250824/201329711BCnwkNP0X.png

Part 5:魔法指令深度導覽

萬事俱備!是時候見證奇蹟了。

A. 破冰之旅:你的第一個指令

我們先來小試身手,確認法杖能正常揮舞。
先執行 gemini 進入對話模式

"用一句話,以一個資深工程師的口吻,解釋什麼是 Hello World"

B. 上下文為王:用 @ 餵食 AI

這徹底改變了遊戲規則!@ 符號能讓我們的對話變得「有根據」。AI 就像坐在你旁邊,能看到你正在看的檔案一樣。
讓 AI 讀取本地檔案

解釋一下@main.py這個檔案在做什麼?並建議函式名稱可以怎麼改得更好 
幫我閱讀@/docs/doc1.md 文件,將文件內容整理給我

通常打上@後,就可以透過方向鍵上下來選取我們所需的文件~
如果需要該資料夾下面的全部檔案,也可以直接@該資料夾!

C. 詠唱禁術:讓終端機開天眼看圖片

假設你有一張網頁設計的截圖叫做 design.png

這是一張網頁設計圖,請用 HTML 和 CSS 幫我刻出這個畫面" @design.png 

D. 終極魔法:命令 AI 代理人執行任務

這才是最震撼的部分。gemini-cli 不只能給你建議,它還能直接幫你執行

啟動我的 Flask 開發伺服器

你會看到它不再只是給你 python app.py 這行字,而是會規劃並執行這個指令!這就是 AI Agent 的真正威力。

結語:魔法,已然覺醒

太不可思議了!今天,我們不只安裝了一個工具,我們是在終端機裡,召喚了一位強大的 AI 盟友。你現在掌握的能力,已經遠超過去傳統的開發模式。
其實最簡單不用想太多的用法!我們在專案中開啟終端機,打上gemini後,直接如同使用ChatGPT在對話的方式給AI需求,但Gemini CLI 可以直接看到專案,還不用錢$$$!
現在當個工程師可是很花錢的,各式各樣的AI產品相繼推出,每個月都有不少的月費在搶劫我們的錢包!!!

今天我們只是熟悉工具。明天,我們就要正式啟動我們的專案,並且用我們今天學會的工具,使用Gemini CLI 聊出我們的需求製作成第一份文件「專案章程」,正式進入左手藍圖的部份!


上一篇
Day 4: 【工具篇 #2】程式碼的時光機:Git 與 GitHub 版本控制
下一篇
Day 6: 【文件 #1】專案的靈魂:用 Gemini CLI 生成「專案章程」
系列文
左手藍圖,右手魔法:DDD 與 Vibe Coding 的開發協奏曲13
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言